Material swatch

Sometimes you may want to show your materials separately from the rest of the model.

Result

Live Editor

<cylindo-viewer 
  // Upholstery alternative options: "SMART_LEATHER_SADDLE", "SOFT_WOOL_OATMEAL"
  // Legs alternative option: "TAPERED_METAL_LEG_BLACK"
  configuration="UPHOLSTERY:CORD_EMERALD,LEGS:TAPERED_METAL_LEG_BRASS" 
  customer-id="5098" 
  code="SECTIONAL PDP"
>
  <cylindo-swatch
    feature-code="UPHOLSTERY"
    zoomable
    display-mode="fit-inside-viewer"
    thumbnail-crop="0.1,0.1, 0.2, 0.2"
  />
  <cylindo-swatch feature-code="LEGS" />
  <cylindo-swatch feature-code="LEGS" thumbnail-crop="0, 0, 1" />
  <cylindo-thumbnail-bar></cylindo-thumbnail-bar>
</cylindo-viewer>

Props

Name	Type	Default	Description
`alt`	`string`	`""`	Alternative text for the material item. This is used by screen readers.
`customer-id`	`string`	`null`	The customer ID of the material to show. It falls back to the customer ID from the `<cylindo-viewer>`.
`display-mode`	`string`	`"cover-viewer"`	Determines how the material image fits within the viewer's content area.
`feature-code`	`string`	`null`	The feature code of the material to show.
`thumbnail-crop`	`string`	`"0.03125, 0.03125, 0.0625"`	The crop applied to the swatch thumbnail.
`zoomable`	`boolean`	`false`	Enables the zoom feature.

Props​

Props